page {
	}

	.orderConfirm {

		.price-group {
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-around;

			.item {
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
		}

		.popup {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;

			.header {
				text-align: center;
				font-size: 30rpx;
				font-weight: bold;
				margin-top: 10rpx;
			}

			.title {
				margin: 10rpx;
				letter-spacing: 3rpx;
			}

			.btns {
				display: flex;
				width: 100%;
				align-items: center;
				justify-content: space-between;

				.btn {
					height: 70rpx;
					line-height: 70rpx;
					width: 50%;
					text-align: center;
					font-size: 32rpx;
					border: 1px solid #EEE;
				}
			}
		}

		&-address {
			background: #ffffff;
			border-radius: 16rpx;
			@include flex;
			width: 100%;
			box-sizing: border-box;
			padding: 15rpx;

			.icon {
				width: 72rpx;
				height: 72rpx;
				margin: 0 40rpx;
			}

			.info {
				width: 450rpx;

				.user {
					display: flex;
					align-items: center;
					line-height: 85rpx;

					&-name {
						font-size: 36rpx;
						margin-right: 25rpx;
					}

					&-tel {
						color: #aaaaaa;
						font-size: 30rpx;
					}
				}

				.address {
					font-size: 30rpx;
					letter-spacing: 1rpx;
				}
			}

			.arrow {
				width: 13rpx;
				height: 24rpx;
			}
		}

		&-bd {
			margin-top: 20rpx;
			background: #ffffff;
			border-radius: 16rpx;
			width: 100%;
			box-sizing: border-box;
			padding: 0 30rpx;

			.title {
				display: flex;
				align-items: center;
				font-size: 30rpx;
				line-height: 85rpx;

				.icon {
					width: 31rpx;
					height: 31rpx;
					margin-right: 20rpx;
				}
			}

			.list {
				&-item {
					margin-bottom: 20rpx;
					display: flex;
					align-items: center;

					.cover {
						width: 185rpx;
						height: 185rpx;
						border-radius: 8rpx;
						margin-right: 35rpx;
					}

					.info {
						width: 345rpx;

						&-title {
							display: -webkit-box;
							/* 弹性盒旧式语法 */
							-webkit-box-orient: vertical;
							/* 经过个人实测，vertical或horizontal都没问题，只是必须设置该属性 */
							-webkit-line-clamp: 2;
							/* 限制两行 */
							overflow: hidden;
							font-size: 30rpx;
						}

						&-size {
							color: #aaaaaa;
							font-size: 26rpx;
							line-height: 60rpx;
						}

						&-other {
							display: flex;
							align-items: center;

							.price {
								font-size: 30rpx;
								margin-right: 25rpx;
							}

							.num {
								font-size: 26rpx;
								color: #aaaaaa;
							}
						}
					}
				}
			}

			.total {
				display: flex;
				justify-content: flex-end;
				align-items: center;
				line-height: 70rpx;

				&-nums {
					color: #aaaaaa;
					font-size: 26rpx;
				}

				&-text {
					font-size: 28rpx;
				}

				&-price {
					font-size: 32rpx;
					font-weight: bold;
				}
			}
		}

		&-oper {
			width: 100%;
			position: fixed;
			left: 0;
			bottom: 0;
			background: #ffffff;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			padding: 20rpx 20rpx 50rpx 20rpx;

			.nums {
				color: #aaaaaa;
				font-size: 26rpx;
				margin-right: 20rpx;
			}

			.text {
				font-size: 28rpx;
			}

			.price {
				font-size: 30rpx;
				font-weight: bold;
			}

			.btn {
				margin: 0 20rpx;
				width: 170rpx;
				text-align: center;
				line-height: 60rpx;
				color: #ffffff;
				font-size: 30rpx;
				background: #cd8544;
			}
		}

		&-setting {
			position: absolute;
			text-align: center;
			font-size: 28rpx;
			color: #ffffff;
			margin: 0;
			height: 55rpx;
			line-height: 55rpx;
			padding: 0 15rpx;
			right: 30rpx;
			bottom: 200rpx;
			color: #333;
		}
	}

.address{
	.type{
		@extend .flex-btw;
		padding: 0 58rpx;
		padding-bottom: 30rpx;
		border-bottom: 1px solid #EEEFF0;
		margin-top: 42rpx;
		color: #666666;
		.select-container{
			display: flex;
			align-items: center;
			flex: 1;
		}
		.radio{
			@extend .flex-center;
			margin-left: 55rpx;
			color: #000;
			.check-cirle{
				width: 30rpx;
				height: 30rpx;
				border-radius: 50%;
				border: 4rpx solid #666666;
				margin-right: 20rpx;
				position: relative;
				&.active{
					border-color: #FC602B;
					&:before{
						content: "";
						width: 15rpx;
						height: 15rpx;
						left: 5rpx;
						top: 5rpx;
						position: absolute;
						background-color:#FC602B;
						border-radius: 50%;
					}
				}
			}
		}
	}
	.self{
		@extend .flex-center;
		flex-direction: column;
		color: #666666;
		.hint{
			@extend .flex-center;
		}
		.detail{
			font-size: 32rpx;
			color: #333;
			text-align: center;
			margin: 30rpx 0;
			width: 400rpx;
			font-weight: bold;
		}
		.distance{
			margin-right: 20rpx;
			color: #999;
		}
	}
}
.bottom{
	position: fixed;
	box-sizing: border-box;
	left: 0;
	bottom: 0;
	width: 100%;
	padding-bottom: 30rpx;
	background-color: #fff;
	
	.count{
		width: 100%;
		padding: 0 26rpx;
		@extend .flex-btw;
		.submit-button{
			font-size: 26rpx;
			color: #FFF;
			padding: 24rpx 60rpx;
			border-radius: 100rpx;
			background: linear-gradient(to right, #FFBC67, #FC602B);
		}
		.price{
			color: $primary-color;
			.real{
				font-size: 60rpx;
				font-weight: bold;
			}
			.tag{
				font-weight: normal;
				font-size: 32rpx;
				margin-right: 5rpx;
			}
			.save{
				font-size: 20rpx;
				color: #999999;
			}
		}
	}
	.vip-card{
		@extend .flex-center;
		background: linear-gradient(to right, #FCDE91, #FEC943);
		padding: 23rpx;
		font-size: 26rpx;
		color: #333;
		margin-bottom: 40rpx;
		.desc{
			font-weight: bold;
		}
		.save-price{
			padding: 0	 9rpx;
			color: #F6E7A7;
			background: linear-gradient(to right,#31448E,#222E56);
			border-radius: 6rpx;
			margin: 0 20rpx;
		}
		.icon{
			margin-left: 10rpx;
		}
	}
}
.container{
	box-shadow: 0 0 16rpx 3rpx rgba(238, 239, 240, 4);
	border-radius: 5rpx;
	margin: 36rpx 26rpx;
	box-sizing: border-box;
	padding: 30rpx;
	font-size: 26rpx;
	.item{
		@extend .flex-btw;
		margin-bottom: 38rpx;
		.label{
			font-size: 26rpx;
			color: #333333;
		}
		.right{
			@extend .flex-center;
			&.price{
				font-weight: bold;
				&.red{
					color: #FF3B30;
				}
			}
			
		}
		&:last-child{
			margin-bottom: 0;
		}
	}
	
}
.products{
	margin-top: 66rpx;
	.list-preview{
		@extend .flex-btw;
	}
	.header{
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		image{
			margin-right: 10rpx;
			width: 60rpx;
		}
	}
	.goods{
		width: 150rpx;
		height: 150rpx;
		margin-right: 20rpx;
		border-radius: 10rpx
	}
}
.express{
	@extend .flex-btw;
	padding: 0 46rpx;
	margin-top: 40rpx;
	.left{
		.address{
			display: flex;
			align-items: center;
			font-size: 26rpx;
			.default{
				margin-right: 5rpx;
				font-size: 20rpx;
				padding: 3rpx 20rpx;
				background-color: $primary-color;
				color: #FFF;
				border-radius: 5rpx;
			}
		}
		.address-detail{
			font-size: 32rpx;
			font-weight: bold;
			margin: 32rpx 0 22rpx 0;
		}
		.name{
			font-size: 26rpx;
		}
	}
}
.product-list-modal{
	padding: 30rpx 36rpx;
	.top{
		@extend .flex-btw;
		font-size: 36rpx;
		font-weight: bold;
		.right{
			font-size: 26rpx;
			color: #666666;
			font-weight: normal;
		}
		.close{
			margin-left: 34rpx;
		}
	}
	.product-container{
		max-height: 800rpx;
	}
	.item{
		padding: 60rpx 0;
		border-bottom: 1px solid #EEEFF0;
		&:last-child{
			border-bottom: none
		}
	}
}
.list{
		.item{
			@extend .flex-btw;
			.cover{
				width: 150rpx;
				height: 150rpx;
				border-radius: 10rpx;
			}
		}
		.right{
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			.info-size,
			.title{
				margin-bottom: 20rpx
			}
			.title{
				color: #666666;
				font-size: 28rpx;
				font-weight: bold;
				width: 400rpx;
			}
			.price-num{
				@extend .flex-btw;
				width: 100%;
				.num{
					@extend .flex-center;
					.num-box{
						margin: 0 16rpx;
						border-radius: 9rpx;
						width: 80rpx;
						height: 40rpx;
						line-height: 40rpx;
						text-align: center;
						background-color: #FAFAFE;
					}
				}
				.price{
					color: $primary-color;
					font-size: 38rpx;
					font-weight: bold;
					.tag{
						font-size: 26rpx;
						font-weight: normal
					}
				}
			}
		}
	}
	.no-add{
		@extend .flex-center;
		width: 100%;
		font-size: 28rpx;
		.icon{
			margin-right: 10rpx;
		}
	}
	.integral-modal{
		padding:30rpx;
		.confirm{
			background-color: $primary-color;
			color: #FFF;
			font-size: 32rpx;
			text-align: center;
			padding: 15rpx;
			border-radius: 50px;
		}
		.item{
			margin-bottom: 20rpx;
			@extend .flex-center;
			.icon{
				margin-right: 10rpx;
				margin-top: 5rpx;
			}
		}
	}
	.size{
		width: 100%;
		margin-bottom: 20rpx;
	}